<!DOCTYPE html>
<html>
    <head>

        <link href="editor.css" type="text/css" rel="stylesheet"/>
        <link href="editor-webdetails.css" type="text/css" rel="stylesheet"/>
        <link href="../static/blueprint/screen.css" type="text/css" rel="stylesheet"/>
        <link href="../static/theme/cupertino/jquery-ui-1.10.4.custom.css" type="text/css" rel="stylesheet"/>

        <script type="text/javascript" src="../static/jquery.js"></script>
        <script type="text/javascript" src="../static/jquery.i18n.properties.js"></script>
        <script type="text/javascript" src="../static/jquery.ui.js"></script>
        <script language="javascript">
        //URLs filled by backend
            var ExternalEditor = {
              EXT_EDITOR: null,
              CAN_EDIT_URL: null,
              GET_FILE_URL: null,
              SAVE_FILE_URL: null,
              STATUS: {
                OK: "ok",
                ERROR: "error"
              },
              EXT_EDITOR: null,
              LANG_PATH: null,
              LOCALE: null
            };
            // Init jQuery i18n plugin
            loadMessageBundles = function(lang) {

                jQuery.i18n.properties({
                    name : 'Messages',
                    path : ExternalEditor.LANG_PATH,
                    mode : 'both',
                    language : (lang == 'browser' ? jQuery.i18n.browserLang() : lang)
                });
            }
            saveFile = function() {
                getEditorWindow().save();
            }
            previewFile = function() {
                var fileName = $("#staticfile").text();
                window.open('previewQuery?path=' + fileName);
            }
            loadFile = function() {
                var params = pageParams();

                //build full path //ExternalEditor.Path;
                var path = getFullPath(params);
                $("#staticfile").text(path);

                var externalEditor = $('#externalEditor');
                var header = $('.cdalogo');

                externalEditor.height(window.innerHeight - header.height() - 5);

                externalEditor.on('load', function() {
                    var editorEnv = getEditorWindow();
                    editorEnv.listeners.onStatusUpdate = setDirty;
                    editorEnv.listeners.notify = function(msg, type) {
                        $('#notifications').text(msg);
                        $('#notifications').fadeIn().delay(2000).fadeOut('slow');
                    }

                    $('#notifications').hide();
                });
                // try to fit height to window size, width is set by CSS in editor.css #externalEditor
                var mainContainer = $('.container');
                var height = $(parent.window).innerHeight() - $('.webdetailsHead').outerHeight(true) - $('.webdetailsFooter').outerHeight(true);
                height -= mainContainer.outerHeight(true) - externalEditor.height();
                externalEditor.height(height);

                // load the editor
                externalEditor.attr('src', ExternalEditor.EXT_EDITOR + '?path=' + path + '&theme=ace/theme/eclipse&editorOnly=true');
            }
            /*
             *  pageParams: get the request variables passed in the url
             */
            pageParams = function() {
                var url = document.location.href;
                var output = {};
                var index = url.indexOf('?');
                if (index < 0) {
                    return null;
                } else {
                    // First we get the part of the url with the parameters in it (i.e. after the '?'), and partition
                    // it into individual 'var=value' pieces. Then we split those pieces and add them to the output object
                    args = url.slice(index + 1).split('&');
                    for ( i = 0; i < args.length; i++) {
                        pair = args[i].split('=');
                        output[pair[0]] = unescape(pair[1]);
                    }
                    return output;
                }
            }
            getFullPath = function(params) {
                var path;
                if (params != null && params.solution != undefined) {
                    // If we have fully qualified path, concatenate the pieces together.
                    // We mustn't forget to account for double slashes
                    path = params.solution + '/' + params.path + '/' + params.file;
                    path = path.replace(/(\/)+/g, "/");
                } else if (params != null) {
                    path = params.path;
                }
                return path;
            }
            setDirty = function(isDirty) {
                $('#save').attr('disabled', !isDirty);
                 //$('#fileQualifier').text(isDirty ? '*' : '');
            }
            getEditorWindow = function() {
                return $('#externalEditor')[0].contentWindow;
            }

        </script>

    </head>
    <body>
        <div class="webdetailsHead">
            <div class="webdetailsLogo">
                <a href="http://www.webdetails.pt/ctools/cda.html" target="_blank"></a>
            </div>
            <div class="buttoncontact ">
                <a href="mailto:portugal.leads@hitachivantara.com" title="Contact Hitachi Vantara directly here.">Get in Touch</a>
            </div>
        </div>
        <div class="container">

            <div class="span-23 clearfix cdalogo">
                <div>
                    <div style="text-align: right;" class="span-16 filename">
                        <span style="font-size: 12px; line-height:25px; font-weight: 600; letter-spacing: .5px;">File: </span><span  id="staticfile" style="font-size: 12px; line-height:25px;"></span><span id="fileQualifier"></span>
                    </div>
                    <div id="controller">

                        <button class="span-2 button" onclick="saveFile()" id="save" disabled="">
                            Save
                        </button>
                        <button class="span-2 button" onclick="loadFile()" id="reload">
                            Reload
                        </button>
                        <button class="span-2 button" onclick="previewFile()" id="preview">
                            Preview
                        </button>
                    </div>
                </div>
                <div class="span-24 last" style="text-align:center;">
                    <span style="display: none;" id="notifications" class="notification"></span>
                </div>
            </div>

            <iframe id="externalEditor" style="overflow:hidden;" marginheight="0" seamless="true" class="last"></iframe>

        </div>
        <div class="webdetailsFooter">
            <div class="webdetailsFooterCtools">
                <a href="https://community.hitachivantara.com/s/topic/0TO1J0000017kVNWAY/ctools" target="_blank"></a>
            </div>
        </div>
        <script language="javascript">
            $(document).ready(function() {
//                 // Initialize jquery.i18n plugin - load message files
                 loadMessageBundles(ExternalEditor.LOCALE);
                $('#save').text(jQuery.i18n.prop('label.save'));
                $('#reload').text(jQuery.i18n.prop('label.reload'));
                $('#preview').text(jQuery.i18n.prop('label.preview'));

                loadFile();
            });

        </script>
    </body>
</html>
